<ui:composition template="/dynamic/layout/layout.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="content">
		<style>
label {
	width: 100px;
	float: left;
	text-align: right;
}
</style>
		<div id="welcome">
			<p style="clear: both" />
		</div>

			<h:form id="loginForm" prependId="false">
				<h:messages globalOnly="false" showDetail="true" 
                        errorClass="messagesError" fatalClass="messagesFatal" 
                        infoClass="messagesInfo" warnClass="messagesWarn" />
					<fieldset>
						<legend>Edycja użytkownika</legend>
						<p>
							<label>Login:</label>
							<p:inputText id="username" required="true"
								styleClass="login_input_long" label="Login"
								requiredMessage="Login jest wymagany!"
								validatorMessage="Login musi być dłuższy niż 4 znaki!"
								value="#{userMBean.selectedUser.username}">
								<f:ajax event="blur" render="usernameM" />
								<f:validateLength minimum="5" />
							</p:inputText>
							<h:message id="usernameM" for="username" style="color:red"
								showDetail="true" showSummary="true" tooltip="true" />
						</p>

						<p>
							<label>Imie:</label>
							<p:inputText id="name" required="true"
								styleClass="login_input_long" label="Imie"
								requiredMessage="Login jest wymagany."
								validatorMessage="Imie musi być dłuższe niż 2 znaki!"
								value="#{userMBean.selectedUser.name}">
								<f:ajax event="blur" render="nameM" />
								<f:validateLength minimum="3" />
							</p:inputText>
							<h:message id="nameM" for="name" style="color:red"
								showDetail="true" showSummary="true" tooltip="true" />
						</p>

						<p>
							<label>Nazwisko:</label>
							<p:inputText id="secondName" required="true"
								styleClass="login_input_long" label="Nazwisko"
								requiredMessage="Nazwisko jest wymagane."
								value="#{userMBean.selectedUser.secondName}"
								validatorMessage="Nazwisko musi być dłuższe niż 2 znaki!">
								<f:ajax event="blur" render="secondNameM" />
								<f:validateLength minimum="3" />
							</p:inputText>
							<h:message id="secondNameM" for="secondName" style="color:red"
								showDetail="true" showSummary="true" tooltip="true" />
						</p>

						<p>
							<label>Telefon:</label>
							<p:inputText id="phone" styleClass="login_input_long"
								label="Telefon" value="#{userMBean.selectedUser.phone}"
								validatorMessage="Telefon musi mieć conajmniej 6 znaków!">
								<f:ajax event="blur" render="phoneM" />
								<f:validateLength minimum="6" />
							</p:inputText>
							<h:message id="phoneM" for="phone" style="color:red"
								showDetail="true" showSummary="true" tooltip="true" />
						</p>

						<p>
							<label>Email:</label>
							<p:inputText id="email" required="true"
								styleClass="login_input_long" label="Email"
								requiredMessage="Email jest wymagany."
								value="#{userMBean.selectedUser.email}"
								validatorMessage="Niepoprawny email!">
								<f:ajax event="blur" render="emailM" />
								<f:validateRegex
									pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
							</p:inputText>
							<p:watermark for="email" value="Email Address" />
							<h:message id="emailM" for="email" style="color:red"
								showDetail="true" showSummary="true" tooltip="true" />
						</p>

						<p>
							<label>Data urodzenia:</label>
							<p:calendar id="birthDate" label="Data urodzenia"
								value="#{userMBean.selectedUser.dateOfBirth}"
								required="true" requiredMessage="Data urodzenia jest wymagana."
								pattern="dd-MM-yyyy">
								<f:convertDateTime pattern="dd-MM-yyyy" />
							</p:calendar>
							<h:message for="birthDate" style="color:red" showDetail="true"
								showSummary="true" tooltip="true" />
						</p>
						<p>
							<p:commandButton value="Nadaj prawa administratora" rendered="#{userMBean.selectedUser.normalUser}" 
							action="#{userMBean.madeAdmin}" ajax="false"/>
						</p>

						<p:commandButton id="addNewUser" type="submit"
							action="#{userMBean.saveEditedUser}" 
							value="Zapisz zmiany" />
					</fieldset>
				</h:form>

		<div id="main_content"></div>

	</ui:define>
</ui:composition>